<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="notification">
        <title>Notification</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Configuration, methods and events of the Kendo UI Notification">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/notification.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/notification.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouinotification"><a href="#kendouinotification">kendo.ui.Notification</a></h1>

<p>Represents a Kendo UI Notification Widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>Please review the <a href="/controls/layout/notification/overview">Notification Overview</a> help topic if you're not familiar with the widget.</p>
</blockquote>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-allowHideAfter">
<a href="#configuration-allowHideAfter">allowHideAfter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>Indicates the period in milliseconds after which a notification can be dismissed (hidden) by the user.</p>

<h4>Example - set allowHideAfter to 1 second</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    allowHideAfter: 1000
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Defines custom show and hide animations via an Kendo UI Animation object. Setting the value to <code>false</code> disables animations.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<h4>Example - disable animations</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    animation: false
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - slide animations</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    animation: {
        open: {
            effects: "slideIn:left"
        },
        close: {
            effects: "slideIn:left",
            reverse: true
        }
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-appendTo">
<a href="#configuration-appendTo">appendTo </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> <em>(default: null)</em>
</h3>

<p>Defines the element to which the notifications will be appended or prepended (depending on the <a href="#configuration-stacking">stacking</a> direction).</p>

<h4>Example - set appendTo as a selector string</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;div id="container"&gt;&lt;/div&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    appendTo: "#container"
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - set appendTo as a DOM element</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;div id="container"&gt;&lt;/div&gt;
&lt;script&gt;
var container = document.getElementById("container");
$("#notification").kendoNotification({
    appendTo: container
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - set appendTo as a jQuery object</h4>

<pre><code>&lt;div id="notification"&gt;&lt;/div&gt;
&lt;script&gt;
var element = $("#notification");
element.kendoNotification({
    appendTo: element
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-autoHideAfter">
<a href="#configuration-autoHideAfter">autoHideAfter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 5000)</em>
</h3>

<p>Indicates the period in milliseconds after which a notification disappears automatically. Setting a zero value disables this behavior.</p>

<h4>Example - set autoHideAfter to 3 seconds</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    autoHideAfter: 3000
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - disable automatic hiding</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    autoHideAfter: 0
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-button">
<a href="#configuration-button">button </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>Determines whether the notifications will include a hide button. <strong>This setting works with the built-in templates only.</strong></p>

<h4>Example - enable hide buttons</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    button: true
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-height">
<a href="#configuration-height">height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Defines the notifications' height. Numbers are treated as pixels.</p>

<h4>Example - set height as a number</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    height: 50
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - set height as a string</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    height: "4em"
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-hideOnClick">
<a href="#configuration-hideOnClick">hideOnClick </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Determines whether notifications can be hidden by clicking anywhere on their content.</p>

<h4>Example - disable hideOnClick</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    hideOnClick: false
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position">
<a href="#configuration-position">position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p><strong>This setting applies to popup notifications only, i.e. in cases when <code>appendTo</code> is not set.</strong>
It determines the position of the first notification on the screen, as well as whether the notifications will move together with the page content during scrolling.
<code>top</code> takes precedence over <code>bottom</code> and <code>left</code> takes precedence over <code>right</code>.</p>

<h4>Default position settings</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        pinned: true,
        top: null,
        left: null,
        bottom: 20,
        right: 20
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position.bottom">
<a href="#configuration-position.bottom">position.bottom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 20)</em>
</h3>

<p>Determines the pixel position of the first popup notification with regard to the viewport's bottom edge.</p>

<h4>Example - set position.bottom</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        bottom: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position.left">
<a href="#configuration-position.left">position.left </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: null)</em>
</h3>

<p>Determines the pixel position of the first popup notification with regard to the viewport's left edge.</p>

<h4>Example - set position.left</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        left: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position.pinned">
<a href="#configuration-position.pinned">position.pinned </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Determines whether the popup notifications will move together with the other page content during scrolling.</p>

<h4>Example - disable pinned notifications</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        pinned: false
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position.right">
<a href="#configuration-position.right">position.right </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 20)</em>
</h3>

<p>Determines the pixel position of the first popup notification with regard to the viewport's right edge.</p>

<h4>Example - set position.right</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        right: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position.top">
<a href="#configuration-position.top">position.top </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: null)</em>
</h3>

<p>Determines the position of the first popup notification with regard to the viewport's top edge. Numeric values are treated as pixels.</p>

<h4>Example - set position.top</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        top: 30
    }
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-stacking">
<a href="#configuration-stacking">stacking </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "default")</em>
</h3>

<p>Determines the direction in which multiple notification will stack (arrange) with regard to the first one. Possible values are <code>"up"</code>, <code>"right"</code>, <code>"down"</code>, <code>"left"</code> and <code>"default"</code>.
The <code>"default"</code> setting takes into consideration the applied <code>position</code> settings and is evaluated to <code>"up"</code> or <code>"down"</code>.</p>

<h4>Example - set downward stacking</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    position: {
        top: 20,
        right: 20
    },
    stacking: "down"
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="configuration-templates">
<a href="#configuration-templates">templates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: [])</em>
</h3>

<p>Describes the HTML markup of the different notification types as Kendo UI template strings. The built-in types are <code>"info"</code>, <code>"success"</code>, <code>"warning"</code> and <code>"error"</code>.</p>

<p><em>This documentation section assumes that you are familiar with <a href="/framework/templates/overview">Kendo UI templates</a></em>.</p>

<h4>Example - define several custom templates</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;

&lt;script id="myAlertTemplate" type="text/x-kendo-template"&gt;
    &lt;div class="myAlert"&gt;System alert generated at #= time # : #= myMessage #&lt;/div&gt;
&lt;/script&gt;

&lt;script&gt;
$(function(){
    var notificationElement = $("#notification");

    notificationElement.kendoNotification({
        templates: [{
                // define a custom template for the built-in "warning" notification type
                type: "warning",
                template: "&lt;div class='myWarning'&gt;Warning: #= myMessage #&lt;/div&gt;"
            }, {
                // define a template for the custom "timeAlert" notification type
                type: "timeAlert",
                template: "&lt;div class='myAlert'&gt;System alert generated at #= time # : #= myMessage #&lt;/div&gt;"
                // template content can also be defined separately
                //template: $("#myAlertTemplate").html()
        }]
    });

    var n = notificationElement.data("kendoNotification");

    // show a warning message using the built-in shorthand method
    n.warning({
        myMessage: "some warning message here"
    });

    // show a "timeAlert" message using the default show() method
    n.show({
        time: new Date().toLocaleTimeString(),
        myMessage: "Server will be restarted."
    }, "timeAlert");
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-templates.type">
<a href="#configuration-templates.type">templates.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "")</em>
</h3>

<p><strong>Required.</strong> Specified a unique identifier, which is used to retrieve the correct template when a notification of this type is shown.</p>

<p>See the <a href="#configuration-templates">example above</a>.</p>

<h3 id="configuration-templates.template">
<a href="#configuration-templates.template">templates.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "")</em>
</h3>

<p>Defines a Kendo UI template to be used with the corresponding notification type.</p>

<p>See the <a href="#configuration-templates">example above</a>.</p>

<h3 id="configuration-width">
<a href="#configuration-width">width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Defines the notifications' width. Numbers are treated as pixels.</p>

<h4>Example - set width as a number</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    width: 300
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h4>Example - set width as a string</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
$("#notification").kendoNotification({
    width: "20em"
});
$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-error"><a href="#methods-error">error</a></h3>

<p>This is a shorthand method for <a href="#methods-show"><code>show(data, "error")</code></a></p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<h3 id="methods-getNotifications"><a href="#methods-getNotifications">getNotifications</a></h3>

<p>Returns a jQuery collection of all visible notifications, displayed by the given widget instance. Each item in the collection is a <code>div.k-notification</code> element.</p>

<p>This method is useful for quick removal of all visible messages before showing new ones. After obtaining all visible messages, <strong>remove</strong> them from the DOM
instead of <a href="#methods-hide">hiding</a> them, unless animations are disabled. This is because animations are asynchronous and the new messages
will be shown on the wrong places before the old ones have been hidden. Another thing to keep in mind is that when using
<a href="/web/notification/overview#popup-messages"><strong>popup</strong></a> notification messages, you should remove the <a href="/web/notification/overview#html-output"><strong>parent</strong></a>
of each member of the collection, returned by the <code>getNotifications()</code> method. In this case the parent will be a <code>div.k-animation-container</code> element.</p>

<h4>Example</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;button id="removeMessages" type="button" class="k-button"&gt;Remove messages and show new ones&lt;/button&gt;

&lt;script&gt;

var notificationWidget = $("#notification").kendoNotification({
    button: false,
    hideOnClick: false,
    autoHideAfter: 0
}).data("kendoNotification");

var messageCount = 1;

notificationWidget.show("foo " + messageCount);
notificationWidget.show("bar " + messageCount);

$("#removeMessages").click(function(){
    // since there is no way for the user to hide notifications,
    // the following expression will return two elements, no matter when it is executed
    var elements = notificationWidget.getNotifications();

    // remove the two messages from the DOM
    elements.each(function(){
        $(this).parent().remove();
    });

    messageCount++;

    // show two new messages
    notificationWidget.show("foo " + messageCount);
    notificationWidget.show("bar " + messageCount);
});

&lt;/script&gt;
</code></pre>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> A collection of all visible notifications.</p>

<h3 id="methods-hide"><a href="#methods-hide">hide</a></h3>

<p>Hides all notifications from the given widget instance.</p>

<p>If you intend to use this method to dispose of all visible messages before showing new ones,
then use the <a href="#methods-getNotifications"><code>getNotifications()</code></a> method instead, unless animations are disabled.</p>

<h4>Example</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
var notificationWidget = $("#notification").kendoNotification().data("kendoNotification");

notificationWidget.show("foo");
notificationWidget.show("bar");

notificationWidget.hide();
&lt;/script&gt;
</code></pre>

<h3 id="methods-info"><a href="#methods-info">info</a></h3>

<p>This is a shorthand method for <a href="#methods-show"><code>show(data, "info")</code></a></p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<p>Note that the widget does not perform any automatic sanitization of the passed content and <code>script</code> tags will be evaluated.
In order to encode script tags as HTML entities, use <code>#: #</code> expressions in the <a href="/framework/templates/overview">Kendo UI templates</a>.</p>

<h3 id="methods-show"><a href="#methods-show">show</a></h3>

<p>Displays a notification.</p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<blockquote>
<p><strong>Important</strong> The content <strong>will not</strong> be HTML-encoded. Use the <a href="#methods-showText">showText</a> if you only intend to show plain text.</p>
</blockquote>

<h5>type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The notification type. Built-in types include <code>"info"</code>, <code>"success"</code>, <code>"warning"</code> and <code>"error"</code>. Custom types should match the types from the <a href="#configuration-templates">template configuration</a>.
If this argument is not supplied, then <code>"info"</code> is assumed.</p>

<h4>Example - Use the show method with a template and custom arguments</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
var notificationWidget = $("#notification").kendoNotification().data("kendoNotification");

notificationWidget.show("foo text", "warning");
&lt;/script&gt;
</code></pre>

<h4>Example - Use the show method and return the message from a function</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
function getNotificationMessage() {
    return "foo text";
}

var notificationWidget = $("#notification").kendoNotification().data("kendoNotification");

notificationWidget.showText(getNotificationMessage());
&lt;/script&gt;
</code></pre>

<h3 id="methods-showText"><a href="#methods-showText">showText</a></h3>

<p>Displays a plain-text notification.</p>

<p>This is a safer version of the <a href="#methods-show">show</a> method that assumes that you want to encode any markup passed in as a message.</p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<h5>type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The notification type. Built-in types include <code>"info"</code>, <code>"success"</code>, <code>"warning"</code> and <code>"error"</code>. Custom types should match the types from the <a href="#configuration-templates">template configuration</a>.
If this argument is not supplied, then <code>"info"</code> is assumed.</p>

<h4>Example - Use the showText method to display a string</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
var notificationWidget = $("#notification").kendoNotification().data("kendoNotification");

notificationWidget.showText("foo text", "warning");
&lt;/script&gt;
</code></pre>

<h4>Example - use the show method with a function argument</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;
function getNotificationMessage() {
    return {
        myMessage: "foo text"
    }
}

var notificationWidget = $("#notification").kendoNotification({
    templates: [{
        type: "myAlert",
        template: "&lt;div&gt;System alert: #= myMessage #&lt;/div&gt;"
    }]
}).data("kendoNotification");

notificationWidget.show(getNotificationMessage(), "myAlert");
&lt;/script&gt;
</code></pre>

<h3 id="methods-success"><a href="#methods-success">success</a></h3>

<p>This is a shorthand method for <a href="#methods-show"><code>show(data, "success")</code></a></p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<h3 id="methods-warning"><a href="#methods-warning">warning</a></h3>

<p>This is a shorthand method for <a href="#methods-show"><code>show(data, "warning")</code></a></p>

<h4>Parameters</h4>

<h5>data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p><strong>Required</strong>. The string content for the notification; or the object with the values for the variables inside the notification template; or the function, which returns the required string or an object.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-hide"><a href="#events-hide">hide</a></h3>

<p>Fires when a notification's hiding animation starts.</p>

<h4>Event Data</h4>

<h5>e.element <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The jQuery object, which wraps the element being hidden.</p>

<h4>Example - subscribe to the "hide" event during initialization</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;

function onHide(e) {
    var elementBeingHidden = e.element;
}

$("#notification").kendoNotification({
    hide: onHide
});

$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre>

<h3 id="events-show"><a href="#events-show">show</a></h3>

<p>Fires when a notification's showing animation starts.</p>

<h4>Event Data</h4>

<h5>e.element <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The jQuery object, which wraps the element being displayed.</p>

<h4>Example - subscribe to the "show" event during initialization</h4>

<pre><code>&lt;span id="notification"&gt;&lt;/span&gt;
&lt;script&gt;

function onShow(e) {
    var elementBeingShown = e.element;
}

$("#notification").kendoNotification({
    show: onShow
});

$("#notification").getKendoNotification().show("Kendo Notification");
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

